<!-- 一些页面可能需要的搜索盒子,包含选择框和搜索框和按钮 其中搜索框需要放置在选择框的后面-->
<template>
  <div class="search-box">
    <SelectItem
      v-for="(options, index) in SelectItemList"
      :options="options"
      :key="options[index].value"
      :title="SelectItemTitleList[index]"
    ></SelectItem>
    <SearchItem :title="SearchItemTitle" :placeholder="SearchItemPlaceholder"></SearchItem>
    <el-button
      type="button"
      icon="el-icon-refresh-right"
      size="mini"
      @click="remake"
      >重置
  </el-button
    >
  </div>
</template>
<script lang="ts">
import { Vue, Component,Prop } from "vue-property-decorator";
import SelectItem from "./SelectItem.vue";
import SearchItem from "./SearchItem.vue";

export interface option {
  value: string;
  label: string;
}
@Component({
  name: "SearchBox",
  components: {
    SelectItem,
    SearchItem,
  },
})
export default class extends Vue {
  @Prop()SelectItemList!: Array<Array<option>>
  @Prop()SelectItemTitleList!: Array<string>
  @Prop()SearchItemTitle!:string
  @Prop()SearchItemPlaceholder!:string
  // 清空所有input的value
  remake(): void {
    // 获取子组件,并调用子组件中的方法
    for (let i = 0; i < this.SelectItemList.length; i++) {
      (this.$children[i] as SelectItem).clearValue();
    }
    (this.$children[this.SelectItemList.length] as SearchItem).clearValue();
  }
}
</script>

<style scoped>
.search-box{
  margin-bottom: 2px;
  display: flex;
  font-size: 16px;
  font-weight: 700;
}

.el-button,
.el-button:focus,
.el-button:hover {
  border: 1px solid #2d8cf0!important;
  background-color: white!important;
  color: #2d8cf0!important;
  border-radius: 3.2px!important;
  padding: 0 12px!important;
}
</style>
